<!--
 * @Descripttion: 
 * @Author: zhanyi
 * @Date: 2021-10-23 11:18:57
 * @FilePath: \wczd-mobile\src\pages\my-info\edit-password.vue
-->
<template>
  <div class="edit-password">
    <secondTopPanel>
      <div slot='title'>修改密码</div>
    </secondTopPanel>
    <evanForm ref="form" class="evan-form" :label-style="{width:'200upx',paddingRight:'20upx'}" :model='formData' :rules="rules" hide-required-asterisk>
      <evanFormItem label='旧密码' prop="oldPassword">
        <input class="form-input" v-model="formData.oldPassword" type="password" placeholder="请输入你的旧密码">
      </evanFormItem>
      <evanFormItem label='新密码' prop="newPassword">
        <input class="form-input" v-model="formData.newPassword" type="password" placeholder="请输入你的新密码">
      </evanFormItem>
      <evanFormItem label='确认密码' prop="confirmPassword">
        <input class="form-input" v-model="formData.confirmPassword" type="password" placeholder="请再次输入你的新密码">
      </evanFormItem>
    </evanForm>
    <br>
    <button type="primary" class="submit" @click="_updateUserPwd">保存</button>
  </div>
</template>

<script>
import secondTopPanel from '@/pages/component/top-panel/secondTopPanel.vue'
import evanForm from '@/components/evan-form/evan-form.vue'
import evanFormItem from '@/components/evan-form-item/evan-form-item.vue'
import { updateUserPwd } from "@/api/login";

export default {
  name: 'edit-password',
  components: { secondTopPanel, evanForm, evanFormItem },
  data () {
    return {
      formData: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: '旧密码不能为空' }
        ],
        newPassword: [
          { required: true, message: '新密码不能为空' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符' }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空' },
          {
            validator: (rule, value, callback) => {
              if (this.formData.newPassword !== value) {
                callback(new Error('两次输入的密码不一致'))
              } else {
                callback()
              }
            },
          },
        ]
      }
    }
  },
  computed: {},
  mounted () { },
  watch: {},
  methods: {
    // 重置
    reset () {
      this.formData = {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      }
    },
    // 保存密码修改
    _updateUserPwd () {
      this.$refs.form.validate().then(res => {
        updateUserPwd(this.formData).then(res => {
          if (res.code === 200) {
            uni.showToast({
              icon: 'none',
              title: res.msg + '请重新登录',
              duration: 2000,
            });
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/login/login'
              })
            }, 1000);
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg,
              duration: 2000,
            });
            this.reset()
          }
        })
      }).catch(err => {
        this.reset()
      })
    }
  },
}
</script>

<style scoped lang="scss">
/deep/.evan-form-item-container__main {
  justify-content: end;
  text-align: right;
}
.evan-form{
  padding-top: 120upx;
  margin-top: 0;
}
</style>
